import React, {useEffect, useRef, useState} from 'react';
import {useNavigate} from 'react-router-dom';
import {notification} from 'antd';
import 'bootstrap/dist/css/bootstrap.min.css'
import AvatarNavLink from "../../header/HeaderPart/HeadAvatar/AvatarNavLink/AvatarNavLink";
import {loginToServer} from "../../../request/LoginAxios/LoginAxios";
import {User} from "../../../map/User/User";
/*https://blog.csdn.net/a256074653/article/details/124507639*/
const Login = () => {
    const [login, setLogin] = useState(false);
    let [count, setCount] = useState(0);
    const navigate = useNavigate();

    const usernameRef = useRef();
    const passwordRef = useRef();
    // const [info, setinfo] = React.useState("zhangsan")

    const handleSubmit = (e) => {
        /*        setinfo({description:"登录"},{message:"lisi"});
               // CommonAlter("您点击了登录")
                Notification(info);*/
        e.preventDefault();
        let username = usernameRef.current.value;
        let password = passwordRef.current.value;

        var user = User;
        user.username = username;
        user.password = password;

        loginToServer(user).then(() => (
                notification.info({
                    message: "login",
                    description: "登录成功"
                }),
                    setLogin(true))
            // response.data.message==="true"?(notification.info({
            //     message: "login",
            //     description: "登录成功"
            // }), setLogin(true)) : ""
            //

        ).catch(
            // 不放在函数里他就一直会执行
            () => (notification.info({message: "falure", description: "账号或密码错误"}, {}))
        )
        // axios({
        //     method:'GET',
        //     url:`https://localhost/user/${username}`
        // }).then(response => {
        //     if(response.data.password === password) {
        //         console.log('登录成功')
        //     }
        // })


        // if (password === "" || username === "") {
        //     username = "admin";
        //     password = "admin";
        // }
        // if (username === 'admin' && password === 'admin') {
        //     /* CommonAlter(notification);*/
        //     notification.info({message: "login", description: "登录成功"}, {})
        //
        //     setLogin(true);//login 值为true 即可 登录成功
        //
        // } else {
        //     notification.info({message: "falure", description: "账号或密码错误"}, {})
        //
        //     console.log('用户名或密码错误');
        // }

    }

    useEffect(() => {
        if (login) {
            /*设置只让尝试5次 下次需要刷新*/
            setCount(++count)
            if (count < 5) {
                console.log('登录成功,正在跳转界面')
                navigate('/')

            } else {
                /* 别老是跳转啊*/


            }

        } else {
            console.log('等待用户登录')

        }
    })

    return (
        <div>
            <h1 className="title">登录界面</h1>
            <form>
                <input ref={usernameRef} type='text' placeholder='user' className="input-group-sm"/><br/>
                <input ref={passwordRef} type='password' placeholder='password' className="input-group-sm"/><br/>
                <button onClick={handleSubmit} type='submit'>登录</button>
                <button><AvatarNavLink to="/register">去注册?</AvatarNavLink></button>

            </form>
        </div>
    );
}

export default Login;
